<template>
	<div class="zh-data-monitor">
		<el-row :gutter="20" class="header-banner">  
		  	<el-col :xs="18" :sm="18" :md="16" :lg="15" :xl="14">
		  		<div class="data-monitor">
					<div class="title-content">
						<div class="title-monitor">基本信息</div>
						<div class="content-monitor">
							<el-row :gutter="20">
								<el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6" v-for="(item, index) in ($store.state.platformInformation ? BasicEducationData : BasicInformationData)" :key="index">
									<div class="one-sixth clear">
										<div class="one-sixth-img fl">
											<img :src="item.src" alt="">
										</div>
										<div class="one-sixth-text fl">{{item.value}}</div>
										<div class="one-sixth-number fl">{{item.number}}</div>
									</div>
								</el-col>
							</el-row>
							
						</div>
					</div>
				</div>
		  	</el-col>

		  	<el-col :xs="6" :sm="6" :md="8" :lg="9" :xl="10">
		  		<div class="data-monitor">
		  			<div class="title-content">
		  				<div class="title-monitor">待审核</div>
		  				<div class="content-monitor">
		  					<el-row :gutter="20">
								<el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8" v-for="(item, index) in ($store.state.platformInformation ? EducationData :ReviewData)" :key="index">
				  					<div class="review clear">
				  						<div class="one-sixth-text fl">{{item.value}}</div>
										<div class="one-sixth-number fl">{{item.number}}</div>
				  					</div>
				  				</el-col>
				  			</el-row>
		  				</div>
		  			</div>
		  		</div>
		  	</el-col>
		</el-row>

		<el-row :gutter="20">
		  	<el-col :xs="18" :sm="18" :md="16" :lg="15" :xl="14">
		  		<div class="data-monitor">
		  			<div class="title-content">
		  				<div class="title-monitor">系统信息</div>
		  				<div class="content-monitor">
		  					<ul class="system-content">
		  						<li class="clear">
		  							<div>程序版本</div>
		  							<div>{{systemData.version}}</div>
		  						</li>
		  						<li class="clear">
		  							<div>操作系统</div>
		  							<div>Linux</div>
		  						</li>
		  						<li class="clear">
		  							<div>剩余空间</div>
		  							<div>剩余 {{systemData.memory_free}} / 总共 {{systemData.memory_sum}}</div>
		  						</li>
		  						<li class="clear">
		  							<div>当前时间</div>
		  							<div>{{timedata}}</div>
		  						</li>
		  					</ul>
		  				</div>
		  			</div>
		  		</div>
		  	</el-col>
              
		  	<el-col :xs="6" :sm="6" :md="8" :lg="9" :xl="10">
		  		<div class="data-monitor">
		  			<div class="title-content">
		  				<div class="title-monitor">公告</div>
		  				<div class="content-monitor">
		  					<ul class="system-content">
		  						<li class="clear" v-for="(item, index) in newsData" :key="index">
									<a :href="BASE_URL + '/home/newsDetail?id=' + item.id" target="_blank">{{++index}}. {{item.name}}</a>
		  						</li>
		  					</ul>
		  				</div>
		  			</div>
		  		</div>
		  	</el-col>
		</el-row>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				BasicEducationData: { /**教育局 */
					admin_num:{
						value: "管理员",
						number: "0",
						src: "/static/image/DataMonitoring/admin.png",
					},
					academic_num:{
						value: "教研人员·",
						number: "0",
						src: "/static/image/DataMonitoring/academic.png",
					},
					platform_num:{
						value: "教育局",
						number: "0",
						src: "/static/image/DataMonitoring/education.png",
					},
					school_num:{
						value: "学校",
						number: "0",
						src: "/static/image/DataMonitoring/school.png",
					},
					video_num:{
						value: "视频",
						number: "0",
						src: "/static/image/DataMonitoring/video.png",
					},
					resource_num:{
						value: "资源",
						number: "0",
						src: "/static/image/DataMonitoring/resource.png",
					},
					live_num:{
						value: "直播",
						number: "0",
						src: "/static/image/DataMonitoring/live-broadcast.png",
					},
					album_num:{
						value: "专辑",
						number: "0",
						src: "/static/image/DataMonitoring/album.png",
					},
					eva_num:{
						value: "教研",
						number: "0",
						src: "/static/image/DataMonitoring/eva.png",
					},
					subject_group_num:{
						value: "圈组",
						number: "0",
						src: "/static/image/DataMonitoring/subject-group.png",
					},
					news_num:{
						value: "公告",
						number: "0",
						src: "/static/image/DataMonitoring/news.png",
					},
					recorder_num:{
						value: "设备",
						number: "0",
						src: "/static/image/DataMonitoring/equipment.png",
					},
				},
				BasicInformationData: { /**学校 */
					admin_num:{
						value: "管理员",
						number: "0",
						src: "/static/image/DataMonitoring/admin.png",
					},
					teacher_num:{
						value: "教师",
						number: "0",
						src: "/static/image/DataMonitoring/teacher.png",
					},
					student_num:{
						value: "学生",
						number: "0",
						src: "/static/image/DataMonitoring/student.png",
					},
					parent_num:{
						value: "家长",
						number: "0",
						src: "/static/image/DataMonitoring/patriarch.png",
					},
					video_num:{
						value: "视频",
						number: "0",
						src: "/static/image/DataMonitoring/video.png",
					},
					resource_num:{
						value: "资源",
						number: "0",
						src: "/static/image/DataMonitoring/resource.png",
					},
					live_num:{
						value: "直播",
						number: "0",
						src: "/static/image/DataMonitoring/live-broadcast.png",
					},
					album_num:{
						value: "专辑",
						number: "0",
						src: "/static/image/DataMonitoring/album.png",
					},
					eva_num:{
						value: "评课",
						number: "0",
						src: "/static/image/DataMonitoring/class-evaluation.png",
					},
					test_num:{
						value: "试题",
						number: "0",
						src: "/static/image/DataMonitoring/test-questions.png",
					},
					log_num:{
						value: "日记",
						number: "0",
						src: "/static/image/DataMonitoring/log.png",
					},
					recorder_num:{
						value: "设备",
						number: "0",
						src: "/static/image/DataMonitoring/equipment.png",
					},
				},
				ReviewData: { /**学校 */
					register_user_num:{
						value: "账号申请",
						number: "0",
					},
					order_live_num:{
						value: "直播",
						number: "0",
					},
					order_resource_num:{
						value: "资源",
						number: "0",
					},
					recorded_file_num:{
						value: "录制文件",
						number: "0",
					},
					questioning_test_num:{
						value: "试题",
						number: "0",
					},
					subject_group_num:{
						value: "圈组",
						number: "0",
					},
				},
				EducationData: { /**教育局 */
					order_video_num:{
						value: "视频",
						number: "0",
					},
					order_live_num:{
						value: "直播",
						number: "0",
					},
					order_resource_num:{
						value: "资源",
						number: "0",
					},
					recorded_file_num:{
						value: "录制文件",
						number: "0",
					},
					teacher_num:{
						value: "名师",
						number: "0",
					},
				},
				systemData:{
					version:'',
					memory_sum:'',
					memory_free:'',
					timeDate:null,
				},
				runInfoTimeOut:null,
				timedata:null,
				newsData:[]
			}
		},
		created(){
			this.getBasicData();
			this.getAuthData();
			this.getSystemData();
			this.getNewsData();
		},
		mounted(){
			//运行时间
	        this.runInfoTimeOut = setInterval(() => {
	        	if( !is_empty(this.systemData.timeDate) ){
	        		this.formatRunTime();
	        	}
	    		
			}, 1000)
		},
		methods:{
			getBasicData(){
				// 重写成功回调
				let success = ( data => {
					for ( var i in data.data){
						try {
							this.BasicInformationData[i].number = data.data[i];
						}
						catch(err){}
					}
					for ( var i in data.data){
						try {
							this.BasicEducationData[i].number = data.data[i];
						}
						catch(err){}
					}
				});
  				this.$ajax.get('api/system/basic_info',{params:{},func:{success:success}})
			},
			getAuthData(){
				// 重写成功回调
				let success = ( data => {
					console.log(data.data)
					for ( var i in data.data){
						try {
							this.ReviewData[i].number = data.data[i];
						}
						catch(err){}
					}
					for ( var i in data.data){
						try {
							this.EducationData[i].number = data.data[i];
						}
						catch(err){}
					}
				});
  				this.$ajax.get('api/system/auth_info',{params:{},func:{success:success}})
			},
			getSystemData(){
				// 重写成功回调
				let success = ( data => {
					this.systemData.version = data.data.version;
					this.systemData.memory_sum = data.data.memory_sum;
					this.systemData.memory_free = data.data.memory_free;
					this.systemData.timeDate = data.data.time;
				});
  				this.$ajax.get('api/system/sysdata_info',{params:{},func:{success:success}})
			},
			getNewsData(){
				// 重写成功回调
				let success = ( data => {
					this.newsData = data.data
				});
  				this.$ajax.get('api/system/news_info',{params:{},func:{success:success}})
			},
			formatRunTime(){
				
				this.timedata = timestampToTime( this.systemData.timeDate )
				this.systemData.timeDate++;
			},

		},
		//离开页面之前
		beforeRouteLeave (to, from, next) {
			clearInterval(this.runInfoTimeOut)
		},
		beforeDestroy (){
			clearInterval(this.runInfoTimeOut)
		}
	}
</script>
<style lang="scss">
	.zh-data-monitor {
		min-width: 1000px;
		margin: 0 8%;

		.el-col {
			margin-bottom: 20px;
		}

		.data-monitor {
			background-color: #fff;
			border-radius: 4px;
			// min-width: 677px;

			.title-content {
				margin: 0 29px;
			}
			.title-monitor {
				height: 70px;
				line-height: 70px;
				font-size: 16px;
				font-weight: 800;
			}
			.content-monitor {
				.one-sixth,.review {
					height: 70px;
					line-height: 70px;
					text-align: center;
					margin: 0 5px 10px 5px;
					border: 1px solid #e6e6e6;

					.one-sixth-img {
						width: 33%;
						height: 100%;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.one-sixth-text {
						width: 37%;
						height: 100%;
					}
					.one-sixth-number {
						width: 30%;
						height: 100%;
					}
					.one-sixth-text,.one-sixth-number {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.one-sixth:nth-child(4n+1) {
					margin-left: 0;
				}
				.one-sixth:nth-child(4n) {
					margin-right: 0;
				}
				.review {
					.one-sixth-text {
						width: 60%;
					}
					.one-sixth-number {
						width: 40%;
						color: #EB4600;
					}
				}
				.system-content {
					height: 210px;
					border-top: 1px solid #e6e6e6;
					li {
						border-bottom: 1px solid #e6e6e6;
						div {
							float: left;
							height: 46px;
							line-height: 46px;
						}
						div:first-child {
							width: 25%;
							margin-left: 5%;
						}
						a {
							float: left;
							width: 95%;
							height: 46px;
							line-height: 46px;
							margin-left: 5%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							&:hover {
								color: #409EFF;
							}
						}
					}
				}
			}
		}
	}
</style>
